<%--
  Created by IntelliJ IDEA.
  User: 野兔瑞贝卡
  Date: 2022/5/11
  Time: 8:58
  To change this template use File | Settings | File Templates.
--%>
<%--①--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>机构管理</title>
    <script src="../../style/vue.js"></script>
    <script src="../../style/jquery3.6.js"></script>
</head>
<body>
<div id="web-app">
    <div id="tool-div">
        名称：<input v-model="o.name">
        简称：<input v-model="o.short_name">
        <button @click="search">搜索</button>

    </div>
    <div id="tab-div">
        <table>
            <thead>
            <tr>
                <th>id</th>
                <th>名称</th>
                <th>简称</th>
                <th>修改</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="o in list">
                <td>{{o.id}}</td>
                <td>{{o.name}}</td>
                <td>{{o.short_name}}</td>
                <td>
                    <button @click="view(o)">修改</button>
                </td>
                <td>
                    <button @click="del(o.id)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div>
        <p>修改窗口</p>
        <form id="upd-form">
            <input type="hidden" v-model="upd.id">
            机构名称:<input v-model="upd.name"><br>
            机构简称:<input v-model="upd.short_name"><br>
            <button type="button" @click="updOrg">添加</button>
        </form>
    </div>
</div>
<script>
    //创建vue数据
    const webApp = {
        data() {
            return {
                list: selOrganization(null, null),
                o: {},//查询条件
                upd:{}
            }
        },
        methods: {
            search: function () {
                this.list = selOrganization(this.o.name, this.o.short_name);
            },
    del:function (id){
                $.ajax({
                    type: "post",
                    url:"../../delOrganization",
                    data:{"id":id},
                    dataType: "json",
                    success:function (json){
                        if(json.code==1){
                            console.log(json.message);
                            MyVue.list = selOrganization(null,null);
                        }
                    }
                })
    },
            view:function (o){//回显数据
                this.upd = o;
            },
            updOrg:function (){//修改数据
                $.ajax({
                    type:"post",
                    url:"../../updOrganization",
                    data:this.upd,//vue的数据和ajax传输的数据都是json对象
                    dataType:"json",
                    success:function (json){
                        if (json.code==1){
                            console.log(json.message);
                        }

                    }

                })
                 }
        }
    }
    //挂载vue
   let MyVue = Vue.createApp(webApp).mount('#web-app')

    /**
     * 查询机构
     */
    function selOrganization(name, short_name) {
        let list;
        $.ajax({
            type: "post",
            url: "../../selOrganization",
            data: {
                "name": name,
                "short_name": short_name
            },
            dataType: "json",
            async: false,
            success: function (json) {
                list = json;
            }
        })
        return list;
    }
</script>
</body>
</html>
